<template>
  <div class="list">
    <GoBackNav />
    <div class="list-enu" @click="tiao" 
    v-for="item of arr"
    :key="item.id"
    >
      <img :src="item.albums" alt="" />
      <div class="box">
        <p>{{item.title}}</p>
        <p>{{item.tags}}</p>
      </div>
    </div>
  </div>
</template>


<script>
import GoBackNav from "../components/nav/nav.vue";
export default {
  props: {},
  data() {
    return {
      arr: [],
    }
  },
  components: {
    GoBackNav
  },
  mounted() {
    axios({
      url: "/json/cell.json",
    }).then(
       res=>res.data.reason ==="Success" && (this.arr = res.data.result.data)
      // res => console.log(res)
    )
  },
  updated() {},
  methods: {
    tiao() {
      if (this.title) {
        this.$router.push(`/detail/${this.obj.id}?title=${this.title}`);
      }
    }
  }
};
</script>

<style scoped>
.list {
  margin-top: 2.1875rem;
}
.list-enu {
  display: flex;
  align-items: center;
  margin-top: 0.625rem;
}
img {
  width: 5.25rem;
  height: 5.25rem;
  margin-left: 0.9375rem;
  border-radius: 0.625rem;
}
p {
  margin-left: 0.625rem;
  text-overflow: ellipsis;
  margin-top: 0.625rem;
}
p:nth-child(1) {
  font-weight: bold;
  font-size: 0.875rem;
  color: gray;
}
</style>